<template>
  <div class="list-warp clearfix">
    <div class="order-box clearfix" v-if="progressing.length > 0" v-for="(item, index) in progressing">
      <div class="c-left clearfix">
        <!-- 球 -->
        <div class="c-left-p1" :class="item.deviceTypeName === '洗衣机' ? 'bg-xy' : 'bg-hg'">
          <i class="icon iconfont">{{item.deviceTypeName === '洗衣机'? '&#xe608;' : '&#xe60d;'}}</i>
        </div>
        <!-- 线 -->
        <div class="line">
        </div>
      </div>
      <div class="c-right clearfix">
        <div>
          <chart :item="item" @updateData="updateData(index)"></chart>
        </div>
        <order :item="item"></order>
      </div>
    </div>
    <noData v-if="progressing.length == 0 && !debut">
      <p>暂无进行中的订单</p>
    </noData>
  </div>
</template>
<script>
  import * as api from 'api';
  import noData from '@/components/noData';
  let timer = 0;
  export default {
    props: {
      userId: {
        type: String,
        require: true
      }
    },

    data () {
      return {
        progressing: [],
        debut: true
      }
    },

    created () {
      this.queryOrder();
    },

    components: {
      chart: require('@/components/chart'),
      order: require('./order'),
      noData
    },

    methods: {
      updateData (index) {
        console.log(index);
//        this.progressing.splice(index, 1);
      },
      queryOrder () {
        api.queryUserOrderList({
          userId: this.userId,
          status: '2'
        })
          .then(res => {
            this.progressing = res.resultData;
            this.debut = false;
          })
      }
    },

    mounted () {
      timer = setInterval(() => {
        this.queryOrder();
      }, 10000)
    },

    destroyed () {
      clearInterval(timer);
    }
  }
</script>
